<template>
    <div class="page-wrap" v-loading="loading">
        <require-status :detail="detailData" :stage="detailData.stage" :stageInfo="stageInfo" class="page-header-wrap" v-if="detailData.id">
            <a-page-header @back="() => $router.go(-1)">
                <template #subTitle>
                    <flexbox>
                        <span>{{ $filters.valToNameFilter('fromSystem', detailData.requireSystem) }}</span>
                        <div v-if="detailData.relateVersionNumber">
                            <span>—</span>
                            <a @click="showDetail">{{ detailData.relateVersionNumber }}</a>
                        </div>
                    </flexbox>
                </template>
                <template #tags>
                    <flexbox>
                        <h-status-tag :status="detailData.status" class="margin-l-8" />
                        <a-tag color="blue" v-if="detailData.instanceId"> 补录 </a-tag>
                    </flexbox>
                </template>
                <div class="header-title">
                    {{ detailData.requireName }}
                </div>
            </a-page-header>
            <img src="@/assets/images/badge-pro.png" style="position: absolute; top: 8px; right: -10px" />
            <template #stepExtra v-if="detailData.devType === '2'">
                <div class="margin-t-16" style="min-width: 350px; padding-right: 16px">
                    <flexbox>
                        <span>预计工时：</span>
                        <a-progress
                            class="expect-time-item"
                            :percent="hoursMax ? ~~((workInfo.planWorkHours / hoursMax) * 100) : 0"
                            :showInfo="false"
                        />
                        <span class="margin-l-8">{{ workInfo.planWorkHours }}小时</span>
                    </flexbox>
                    <flexbox class="margin-t-8">
                        <span>耗费工时：</span>
                        <a-progress
                            class="done-time-item"
                            :percent="hoursMax ? ~~((workInfo.expendWorkHours / hoursMax) * 100) : 0"
                            :showInfo="false"
                        />
                        <span class="margin-l-8">{{ workInfo.expendWorkHours }}小时</span>
                    </flexbox>
                </div>
            </template>
        </require-status>
        <div style="height: 22px" />

        <div class="page-cont" v-if="detailData.id">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane :key="0" tab="需求信息">
                    <require-info-tab :detail="detailData" />
                </a-tab-pane>
                <a-tab-pane :key="1" tab="工时信息">
                    <work-info-tab :detail="detailData" :list="workList" @success="getWorkList" />
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import RequireStatus from '@/components/Content/RequireStatus/index.vue';
import RequireInfoTab from '@/views/productRequire/productDetail/allTab/requireInfoTab/index.vue';
import WorkInfoTab from '@/views/productRequire/productDetail/allTab/workInfoTab/index.vue';
import { HStatusTag } from '@/components';
import { useRoute, useRouter } from 'vue-router';
import api from '@/api';
import { defineComponent, computed, reactive, toRefs } from 'vue';
export default defineComponent({
    name: 'CreateProductRequire',
    components: {
        RequireStatus,
        HStatusTag,
        RequireInfoTab,
        WorkInfoTab
    },
    setup() {
        const route = useRoute();
        const router = useRouter();
        const state = reactive<any>({
            loading: false,
            detailData: {},
            stageInfo: {},
            activeKey: 0,
            workList: [],
            workInfo: {
                planWorkHours: 0,
                expendWorkHours: 0
            }
        });
        const hoursMax = computed(() => {
            return Math.max(state.workInfo.planWorkHours, state.workInfo.expendWorkHours);
        });
        const getDetailData = async () => {
            state.loading = true;
            const query = {
                id: route.query.id
            };
            api.productRequireModel.findById(query).then((res) => {
                const { success, moule, errorMsg } = res;
                if (success) {
                    state.detailData = { ...moule };
                    // 外部产品需求，没有进度
                    if (!state.detailData.jiraId) {
                        getStageList(state.detailData.id);
                    }
                    getWorkList();
                } else {
                    message.error(errorMsg);
                }
                state.loading = false;
            });
        };
        // 获取阶段状态，用来显示hover阶段时显示的开始结束日期
        const getStageList = async (id: number) => {
            const allStage = {
                5: { name: '需求设计' },
                6: { name: '需求评审' },
                7: { name: '需求研发' },
                8: { name: '需求测试' },
                9: { name: '需求验收' },
                10: { name: '上线审核' },
                11: { name: '需求上线' }
            };
            const query = {
                id
            };
            const { success, moule, errorMsg } = await api.historyModel.productRequireConsumeTime(query);
            if (success) {
                state.stageInfo = { ...allStage, ...moule };
            } else {
                message.error(errorMsg);
            }
        };
        const showDetail = () => {
            router.push({
                path: '/version/versionDetail',
                query: {
                    id: state.detailData.relateVersionId
                }
            });
        };
        getDetailData();
        const getWorkList = async () => {
            const query = {
                id: state.detailData.id
            };
            const { success, moule } = await api.productWorkLogModel.findByProductId(query);
            if (success) {
                state.workList = [...moule];
                let planWorkHours = 0;
                let expendWorkHours = 0;
                moule.forEach((item) => {
                    planWorkHours += item.planWorkHours;
                    expendWorkHours += item.expendWorkHours;
                });
                state.workInfo = {
                    planWorkHours,
                    expendWorkHours
                };
            }
        };
        return {
            ...toRefs(state),
            hoursMax,
            showDetail,
            getWorkList
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-header-wrap {
        position: sticky;
        top: 0;
        z-index: 9;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        background: #fff;
        &::before {
            content: '';
            position: absolute;
            width: 6px;
            height: 100%;
            background: @primary-color;
            top: 0;
            left: 0;
            z-index: 1;
        }
    }
    .header-title {
        font-size: 20px;
        color: @title-font-color;
        font-weight: bold;
    }
    .expect-time-item,
    .done-time-item {
        width: 160px;
        height: 20px;
        margin-bottom: 4px;
    }
    .expect-time-item {
        // background: @primary-color;
    }
    .done-time-item {
        // background: @success-color;
    }
    .null-time-item {
        background: #ccc !important;
    }
    .page-cont {
        background: #fff;
        position: relative;
    }
}
</style>